/**
 * @desc 省市区三级联动
 * */
import React, { Component } from "react";
import { Select, Space } from "antd";
import PropTypes from "prop-types";
import { apiGetDBAreaList } from "@/request/serviceStation";

class TheArea extends Component {
  state = {
    provinceList: [],
    cityList: [],
    areaList: [],
    province: "",
    provinceName: "",
    city: "",
    cityName: "",
    area: "",
    areaName: "",
  };

  async componentDidMount() {
    await this.getProvince();
  }

  //获取省份信息
  getProvince = async () => {
    const res = await apiGetDBAreaList({ level: 1, areaParentId: 1 });
    if (res.code === 0 && res.data.length > 0) {
      const provinceList = res.data.map((v) => {
        return {
          label: v.areaName,
          value: v.areaId,
        };
      });
      provinceList.unshift({
        label: "全部",
        value: 0,
      });
      this.setState(
        {
          provinceList,
          province: 0,
          provinceName: res.data[0].areaName,
        },
        async () => {
          this.props.setAreaData({
            province: this.state.provinceList[0].value || "",
            provinceName: "",
            city: "",
            area: "",
          });
          if (this.state.provinceList[0].value) {
            await this.getCity(this.state.provinceList[0].value);
          } else {
            this.setState({
              cityList: [],
              areaList: [],
              city: "",
              cityName: "",
              area: "",
              areaName: "",
            });
          }
        }
      );
    }
  };
  //获取市级信息
  getCity = async (areaParentId) => {
    const res = await apiGetDBAreaList({ level: 2, areaParentId });
    if (res.code === 0 && res.data.length > 0) {
      this.setState({
        cityList: res.data.map((v) => {
          return {
            label: v.areaName,
            value: v.areaId,
          };
        }),
        city: res.data[0].areaId,
        cityName: res.data[0].areaName,
      });
      this.props.setAreaData({
        province: this.state.province,
        provinceName: this.state.provinceName,
        city: res.data[0].areaId,
        cityName: res.data[0].areaName,
        area: "",
      });
      await this.getArea(~~res.data[0].areaId);
    }
  };
  //获取区级信息
  getArea = async (areaParentId) => {
    const res = await apiGetDBAreaList({ level: 3, areaParentId });
    if (res.code === 0) {
      this.setState({
        areaList: res.data.map((v) => {
          return {
            label: v.areaName,
            value: v.areaId,
          };
        }),
        area: res.data[0].areaId,
        areaName: res.data[0].areaName,
      });
      this.props.setAreaData({
        province: this.state.province,
        provinceName: this.state.provinceName,
        city: this.state.city,
        cityName: this.state.cityName,
        area: res.data[0].areaId,
        areaName: res.data[0].areaName,
      });
    }
  };
  onChange = async ({ value, label }, level) => {
    switch (~~level) {
      case 1:
        this.setState({
          province: value,
          provinceName: label === "全部" ? "" : label,
        });
        switch (value) {
          case 0:
            this.setState(
              {
                cityList: [],
                areaList: [],
                city: "",
                cityName: "",
                area: "",
                areaName: "",
              },
              () => {
                const {
                  province,
                  provinceName,
                  city,
                  cityName,
                  area,
                  areaName,
                } = this.state;
                this.props.setAreaData({
                  province,
                  city,
                  area,
                  provinceName,
                  cityName,
                  areaName,
                });
              }
            );
            break;
          default:
            await this.getCity(value);
            break;
        }
        break;
      case 2:
        this.setState({ city: value, cityName: label });
        await this.getArea(value);
        break;
      case 3:
        this.setState({ area: value, areaName: label }, () => {
          const { province, provinceName, city, cityName, area, areaName } =
            this.state;
          this.props.setAreaData({
            province,
            city,
            area,
            provinceName,
            cityName,
            areaName,
          });
        });
        break;
      default:
        break;
    }
    // const {province, city, area} = this.state;
    // this.props.setAreaData({
    //     province, city, area
    // });
  };
  init = async () => {
    await this.onChange({ value: 0, label: "全部" }, 1);
  };

  render() {
    const { provinceList, cityList, areaList, province, city, area } =
      this.state;
    return (
      <div className={"area"} style={{ flex: 1 }}>
        <Space>
          <Select
            style={{ width: 200 }}
            value={province} allowClear
            options={provinceList}
            placeholder="请选择省"
            onChange={(value, option) => this.onChange(option, 1)}
          />
          <Select
            style={{ width: 200 }}
            value={city}
            options={cityList} allowClear
            placeholder="请选择市"
            onChange={(value, option) => this.onChange(option, 2)}
          />
          <Select
            style={{ width: 200 }}
            value={area}
            options={areaList} allowClear
            placeholder="请选择区"
            onChange={(value, option) => this.onChange(option, 3)}
          />
        </Space>
      </div>
    );
  }
}

TheArea.propTypes = {
  address: PropTypes.object,
};
TheArea.defaultProps = {};

export default TheArea;
